<script setup>

import {ref} from "vue";
import {ElMessageBox} from "element-plus";
import httpInstance from "@/http/index.js";

//表单
const form = ref({
  name:'',
  city:'',
  id: undefined,
});
//弹窗开关
const dialogVisible = ref(false);
const open = (row) => {
  dialogVisible.value = true;
  //回显
  form.value.id=row.id;
  form.value.name=row.name;
  form.value.city=row.city;
  const ct=[1,2,3]
  ct.forEach()
}
const close = () => {
  dialogVisible.value = false;
}

const emit=defineEmits(['on-update'])
//更新
const onUpdate= async ()=>{

  // 1收集表单数据 调用接口
  await httpInstance.post('/vueTest/update', {
    'id': form.value.id,
    'name': form.value.name,
    'city': form.value.city,
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
  // 2关闭弹框
  close();
  // 3通知父组件做列表更新,子传父
  emit('on-update')
}
//把方法抛出去给父组件调用
defineExpose(
    {
      open, close,
    }
)

//关闭弹窗，可以不需要
const handleClose = () => {
  ElMessageBox.confirm('你要关闭对话框吗?')
      .then(() => {
        close()
      })
      .catch(() => {
      })
}
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="编辑"
      width="400px"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名">
       <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input placeholder="请输入籍贯" v-model="form.city"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onUpdate">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>